<template>
  <div class="app-container pdf-content" id="pdf-content">
    <h2>HTML Table</h2>
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>

    <!-- You can loop to display page number as you want -->

    <!-- Break page pdf -->
    <div class="html2pdf__page-break"></div>
    <!--  -->
    <el-button type="primary" @click="exportPdf" id="export_btn" style="margin-top: 10px">导出</el-button>
  </div>
</template>

<script>
  import { reactive, onMounted, toRefs } from "vue";
  import ExportUtil from "@/utils/exportUtil.js";
  export default {
    name: "PdfExport",
    props: {},
    setup() {
      const state = reactive({});
      const exportPdf = () => {
        document.getElementById("export_btn").style.display = "none";
        ExportUtil.exportPdf(document.getElementById("pdf-content"), "pdf格式的文件");
        setTimeout(() => {
          document.getElementById("export_btn").style.display = "";
        }, 1000);
      };
      return {
        ...toRefs(state),
        exportPdf,
      };
    },
    methods: {
      exportPdf1() {},
    },
  };
</script>

<style lang="scss" scoped>
  table {
    font-size: 14px;
    text-align: center;
    border: 1px solid #ccc;
    border-collapse: collapse;
    th {
      background: #ddd;
      font-weight: bold;
    }
    td,
    th {
      padding: 8px;
      border: 1px solid #ccc;
    }
  }
</style>
